<template>
	<view>
		<view class="flex-col flex-al">
			<view class="title-box w90">
				请选择遇到的问题类型 （单选，必填）
			</view>
			<view class="questions flex-row flex-sb w90">
				<view  @click="changeQue(i)" v-for="(item,i) in questions" :key="item.id" :class="i==used?'active':''">{{item}}</view>
			</view>
			<textarea class="w90" v-if="used==7" @input="inp" :value="other" placeholder="请在此输入具体问题描述与其他问题，以便我们尽快解决您的问题"></textarea>
		</view>
		<view class="post" @click="post" v-if="used==7?other?true:false:true">提交</view>
	</view>
</template>

<script>
	import HttpModule from "../../../module/httpModule.js"
	const httpModule = new HttpModule();
	export default {
		data() {
			return {
				questions: [
					'刷乘车二维码机具无反应',
					'刷乘车二维码提示无效',
					'退款金额失败无到账',
					'余额充值失败无增加',
					'获取二维码失败',
					'乘车未享受优惠',
					'订单等待时间过长',
					'其他'
				],
				other: '',
				used: 0
			}
		},
		methods: {
			changeQue(used) {
				this.used=used;
				console.log(used)
			},
			inp(e) {
				const other = e.detail.value
				this.other=other;
				console.log(other)
			},
			async post() {
				const data = {
					content: ''
				}
				if (this.used == 7) {
					data.content = this.other;
				} else {
					data.content = this.questions[this.used];
				};
				if (data.que) {
					uni.showModal({
						title: '请输入反馈内容',
						content: '请输入反馈内容',
					});
					throw new Error();
				};
				await httpModule.newFeedBack(data);
				uni.showModal({
					title: '反馈成功',
					content: '感谢您的反馈！',
					success(res) {
						uni.navigateBack({

						})
					}
				});
			}
		},
		}
</script>

<style scoped>
.title-box{
  margin:30rpx auto;
  font-size:24rpx;
}
.questions {
  flex-wrap: wrap;
}
.questions view{
  width:320rpx;
  height:64rpx;
  font-size:24rpx;
  line-height: 64rpx;
  text-align: center;
  border-radius:16rpx;
  border:1rpx solid rgba(188,188,188,1);
  color: rgba(187,187,187,1);
  margin-bottom: 25rpx;
}
.questions .active{
  background:rgba(46,169,149,1);
  color: #fff;
  border:1rpx solid rgba(46,169,149,1);
}
textarea{
  box-sizing: border-box;
  padding: 30rpx;
  font-size:24rpx;
  height: 200rpx;
  border-radius:16rpx;
  border:1rpx solid rgba(188,188,188,1);
}
.post{
  float: right;
  margin-right: 60rpx;
  width:168rpx;
height:70rpx;
line-height:70rpx;
text-align: center;
margin-top: 60rpx;
background:rgba(46,169,149,1);
color: #fff;
font-size:28rpx;
border-radius:44rpx;
}
</style>
